<script setup lang="ts">
// 引用element-plus提供的图标
import {
  Search
} from "@element-plus/icons-vue";
// 深度选择器：/deep/ ::v-deep
</script>

<template>
  <div class="search">
    <el-autocomplete
        clearable
        placeholder="请输入医院名称"
        class="search-input"
    />
    <el-button type="primary" size="default" :icon="Search">搜索</el-button>
  </div>
</template>

<style scoped lang="scss">
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  // 下面是使用的深度选择器，要不然我们的样式只能变成全局样式才能显示，前面是固定的格式，里面的内容是这个元素的类名，下面写上样式
  :deep(.search-input) {
    width: 600px;
    margin-right: 10px;
  }
}
</style>
